<script setup lang="ts">
import { appDescription, appName, appVersion, home } from '~/constants'

function openLink() {
  window.open(home, '_blank')
}
</script>

<template>
  <AppHeaderLayout>
    <template #title-bar>
      <div class="flex flex-row self-end">
        <span i-ic:baseline-format-shapes inline-block text-5xl class="self-end pr-2" @click="openLink" />
        <span>
          <text inline-block text-3xl hover:opacity-75 class="self-end" @click="openLink">
            {{ appName }}
          </text>
          <br>
          <text text-l inline-block hover:opacity-75 class="self-end" @click="openLink">
            {{ appDescription }}
          </text>
        </span>
      </div>
    </template>
    <template #header-bar>
      <div class="w-full flex flex-1 flex-row justify-between pl-10">
        <AppMenu class="flex-1" />
        <div class="h-full flex flex-col justify-between">
          <span class="text-xs">Powered by <a
            class="text-white" target="_blank"
            href="https://gitee.com/9658065/html-runner"
          >Html Runner</a></span>
          <span class="flex flex-row self-end justify-between">
            <span class="self-center" i-carbon:web-services-task-definition-version @click="openLink" />
            <span class="self-center" @click="openLink">
              {{ appVersion }}
            </span>
          </span>
        </div>
      </div>
    </template>
  </AppHeaderLayout>
</template>
